<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Liujingjing
 * @LastEditTime: 2022-01-08 20:38:18
-->
<template>
  <div ref="Bottom3_container" style="height: 95%"></div>
</template>
<script>
//2.引入构造函数
import { Scatter } from "@antv/g2plot";
export default {
  data() {
    return {
      dataArr: [
        {
          Title: "Guardians of the Galaxy",
          Genre: "Action",
          "Revenue (Millions)": 333.13,
          Rating: 8.1,
        },
        {
          Title: "Prometheus",
          Genre: "Adventure",
          "Revenue (Millions)": 126.46,
          Rating: 7,
        },
        {
          Title: "Split",
          Genre: "Horror",
          "Revenue (Millions)": 138.12,
          Rating: 7.3,
        },
        {
          Title: "Sing",
          Genre: "Animation",
          "Revenue (Millions)": 270.32,
          Rating: 7.2,
        },
        {
          Title: "Suicide Squad",
          Genre: "Action",
          "Revenue (Millions)": 325.02,
          Rating: 6.2,
        },
        {
          Title: "The Great Wall",
          Genre: "Action",
          "Revenue (Millions)": 45.13,
          Rating: 6.1,
        },
        {
          Title: "La La Land",
          Genre: "Comedy",
          "Revenue (Millions)": 151.06,
          Rating: 8.3,
        },
        {
          Title: "Mindhorn",
          Genre: "Comedy",
          "Revenue (Millions)": null,
          Rating: 6.4,
        },
      ],
    };
  },
  created() {},
  mounted() {
    //5.调用
    this.initChart();
  },
  methods: {
    initChart() {
      //3.创建一个实例对象 'container'=this.$refs.left2_container
      const scatterPlot = new Scatter(this.$refs.Bottom3_container, {
      appendPadding: 10,
      data:this.dataArr,
      xField: 'Revenue (Millions)',
      yField: 'Rating',
      shape: 'circle',
      colorField: 'Genre',
      size: 4,
      yAxis: {
        nice: true,
        line: {
          style: {
            stroke: '#aaa',
          },
        },
      },
      xAxis: {
        min: -100,
        grid: {
          line: {
            style: {
              stroke: '#eee',
            },
          },
        },
        line: {
          style: {
            stroke: '#aaa',
          },
        },
      },
    });
    scatterPlot.render();
    },
  },
};
</script>
